<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="gameId" placeholder="房间ID"></el-input>
				</el-form-item>
				<!--<el-form-item>-->
					<!--<el-input v-model="filters.name" placeholder="状态"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers(pageSize)">查询</el-button>
				</el-form-item>
				<!--<el-form-item>-->
					<!--<el-button type="primary" @click="handleAdd">新增</el-button>-->
				<!--</el-form-item>-->
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="bloodList" highlight-current-row v-loading="listLoading"  style="width: 100%;" :default-sort = "{prop: 'id'}">
			<!--<el-table-column type="selection" width="55">-->
			<!--</el-table-column>-->
			<el-table-column prop="id" label="房间ID" sortable>
			</el-table-column>
			<el-table-column prop="title" label="房间标题" width="200">
			</el-table-column>
			<el-table-column prop="category" label="类型" width="200">
			</el-table-column>
			<el-table-column prop="description" label="描述"  width="300">
			</el-table-column>
			<el-table-column label="操作" min-width="250">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="handleAdd(scope.row)" v-if="!scope.row.hadBloodSlot">新增</el-button>
					<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)" v-else>修改</el-button>
					<el-button size="small" type="primary" @click="handleDetail(scope.row)" v-if="scope.row.hadBloodSlot">查看详情</el-button>
					<!--<el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
				</template>
			</el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar">
			<el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[15, 30, 50]" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="修改" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" :inline="true"  :rules="addFormRules" ref="addForm">
				<el-form-item label="房间">
					<el-input v-model="editForm.gameid" disabled></el-input>
					<!--<el-select v-model="value" placeholder="请选择">-->
					<!--<el-option-->
					<!--v-for="item in options"-->
					<!--:key="item.value"-->
					<!--:label="item.label"-->
					<!--:value="item.value">-->
					<!--</el-option>-->
					<!--</el-select>-->
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="editForm.status">
						<el-radio :label="1" :disabled="editForm.status == 0">吃分</el-radio>
						<el-radio :label="0" :disabled="editForm.status == 1">吐分</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="暗税税率" prop="darkTax">
					<el-input v-model="editForm.darkTax" type="number" min="0" max="10000" style="width: 150px;">
					</el-input>
				</el-form-item>
				<!--<el-form-item label="当前值" prop="value">-->
					<!--<el-input v-model="editForm.value" type="number"></el-input>-->
				<!--</el-form-item>-->
				<!--<el-form-item label="临时值" prop="tmpValue">-->
					<!--<el-input v-model="editForm.tmpValue" type="number"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item>
					<el-button @click="eatAdd" type="primary">吃线添加</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="spitAdd" type="primary">吐线添加</el-button>
				</el-form-item>
				<p style="margin: 0;color:red;font-size: 14px;padding-bottom: 10px">注：血池状态值(吃线)与状态作弊值(吐线)的值为负数</p>
				<el-table :data="eatForm">
					<el-table-column type="index" width="75">
						<template  slot-scope="scope">
							<span>{{(scope.$index+1)+'线'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="血池状态值(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].number" max="0" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="状态作弊值(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].cheatRatio">
								<template slot="append">%</template>
							</el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="强制干预次数(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].cfgForceNum"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="操作">
						<template  slot-scope="scope">
							<el-button @click="eatRow(scope.$index)" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table :data="spitForm">
					<el-table-column type="index" width="75">
						<template  slot-scope="scope">
							<span>{{(scope.$index+1)+'线'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="血池状态值(吐线)">
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].number" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="状态作弊值(吐线)">
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].cheatRatio" max="0" type="number">
								<template slot="append">%</template>
							</el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="强制干预次数(吐线)">
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].cfgForceNum" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="操作">
						<template  slot-scope="scope">
							<el-button @click="spitRow(scope.$index)" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click="editSubmit(editForm.gameid)" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" :inline="true"  :rules="addFormRules" ref="addForm">
				<el-form-item label="房间">
					<el-input v-model="addForm.gameid" disabled></el-input>
				<!--<el-select v-model="value" placeholder="请选择">-->
					<!--<el-option-->
							<!--v-for="item in options"-->
							<!--:key="item.value"-->
							<!--:label="item.label"-->
							<!--:value="item.value">-->
					<!--</el-option>-->
				<!--</el-select>-->
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.status">
						<el-radio class="radio" :label="1">吃分</el-radio>
						<el-radio class="radio" :label="0">吐分</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="暗税税率" prop="darkTax">
					<el-input v-model="addForm.darkTax" type="number" style="width: 150px">

					</el-input>
				</el-form-item>
				<!--<el-form-item label="当前值" prop="value">-->
					<!--<el-input v-model="addForm.value" type="number"></el-input>-->
				<!--</el-form-item>-->
				<!--<el-form-item label="临时值" prop="tmpValue">-->
					<!--<el-input v-model="addForm.tmpValue" type="number"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item>
					<el-button @click="eatAdd" type="primary">吃线添加</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="spitAdd" type="primary">吐线添加</el-button>
				</el-form-item>
				<p style="margin: 0;color:red;font-size: 14px;padding-bottom: 10px">注：血池状态值(吃线)与状态作弊值(吐线)的值为负数</p>
				<el-table :data="eatForm">
					<el-table-column type="index" width="75">
						<template  slot-scope="scope">
							<span>{{(scope.$index+1)+'线'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="血池状态值(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].number" max="0" type="number" >

							</el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="状态作弊值(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].cheatRatio" type="number">
								<template slot="append">%</template>
							</el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="强制干预次数(吃线)">
						<template  slot-scope="scope">
							<el-input v-model="eatForm[scope.$index].cfgForceNum" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="操作">
						<template  slot-scope="scope">
							<el-button @click="eatRow(scope.$index)" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table :data="spitForm">
					<el-table-column type="index" width="75">
						<template  slot-scope="scope">
							<span>{{(scope.$index+1)+'线'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="血池状态值(吐线)">
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].number" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="状态作弊值(吐线)" >
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].cheatRatio" max="0" type="number" >
								<template slot="append">%</template>
							</el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="强制干预次数(吐线)">
						<template  slot-scope="scope">
							<el-input v-model="spitForm[scope.$index].cfgForceNum" type="number"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="操作">
						<template  slot-scope="scope">
							<el-button @click="spitRow(scope.$index)" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="血池详情" :visible.sync="bloodDetail" :before-close="closeBlood">
			<el-form :model="detailData" :inline="true" ref="detailData">
				<el-form-item label="暗税税率">
					<span>{{detailData.darkTax}}%</span>
				</el-form-item>
				<el-form-item label="当前值">
					<label>{{detailData.value | division}}</label>
				</el-form-item>
				<el-form-item label="临时值">
					<label>{{detailData.tmpValue | division}}</label>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="detailData.status">
						<el-radio :label="0" :disabled="detailData.status == 1">吃分</el-radio>
						<el-radio :label="1" :disabled="detailData.status == 0">吐分</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<el-table :data="detailData.eatLines">
				<el-table-column type="index" width="75">
					<template  slot-scope="scope">
						<span>{{(scope.$index+1)+'线'}}</span>
					</template>
				</el-table-column>
				<el-table-column property="number" label="血池状态值(吃线)" ></el-table-column>
				<el-table-column property="cheatRatio" label="状态作弊值(吃线)" ></el-table-column>
				<el-table-column property="cfgForceNum" label="强制干预次数(吃线)"></el-table-column>
			</el-table>
			<el-table :data="detailData.outLines">
				<el-table-column type="index" width="75">
					<template  slot-scope="scope">
						<span>{{(scope.$index+1)+'线'}}</span>
					</template>
				</el-table-column>
				<el-table-column property="number" label="血池状态值(吐线)" ></el-table-column>
				<el-table-column property="cheatRatio" label="状态作弊值(吐线)" ></el-table-column>
				<el-table-column property="cfgForceNum" label="强制干预次数(吐线)"></el-table-column>
			</el-table>
		</el-dialog>


	</section>
</template>

<script>
	import util from '../../common/js/util'
    import Page4 from "../nav2/Page4";
	//import NProgress from 'nprogress'
	export default {
        components: {Page4},
        data() {
			return {
                options: [
                    {
                    value: '001',
                    label: '黄金糕'
                }, {
                    value: '002',
                    label: '双皮奶'
                }, {
                    value: '003',
                    label: '蚵仔煎'
                }
                ],
                value: '001',
				filters: {
					name: ''
				},
                bloodList: [],
                gameId:'',
				total: 0,
				page: 1,
                pageSize:15,
				listLoading: false,
				sels: [],//列表选中列
				eatList:[],
				spitList:[],
                bloodDetail:false,
                detailData:{},

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
                    darkTax: [
                        { required: true, message: '请输入暗税税率', trigger: 'blur' }
                    ],
                    value: [
                        { required: true, message: '请输入当前值', trigger: 'blur' }
                    ],
                    tmpValue: [
                        { required: true, message: '请输入临时值', trigger: 'blur' }
                    ],
				},
				//编辑界面数据
				editForm: {
                    gameid: '',
                    darkTax:'',
                    value:'',
                    tmpValue:'',
                    status:1
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
                    darkTax: [
						{ required: true, message: '请输入暗税税率', trigger: 'blur' }
					],
                    value: [
                        { required: true, message: '请输入当前值', trigger: 'blur' }
                    ],
                    tmpValue: [
                        { required: true, message: '请输入临时值', trigger: 'blur' }
                    ],
				},
				//新增界面数据
				addForm: {
                    gameid: '',
                    darkTax:'',
                    value:'',
                    tmpValue:'',
                    status:1
				},
				eatForm:[],
				spitForm:[]

			}
		},
		methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.getUsers(this.pageSize);
            },
            eatAdd(){
                this.eatForm.push({});
            },
            spitAdd(){
                this.spitForm.push({});
            },
            eatRow(index){
                this.eatForm.splice(index,1);
            },
            spitRow(index){
                this.spitForm.splice(index,1);
            },
            handleDetail(row){
                let roomId = row.id
				this.getBlood(roomId)
                this.bloodDetail = !this.bloodDetail
				window.timer = setInterval(()=>{
                    this.getBlood(roomId)
				},5000)
			},
            closeBlood(){
                window.clearInterval(window.timer)
                this.bloodDetail = !this.bloodDetail
			},
			getBlood(roomId){
                this.$axios.get('/blood-slot/'+roomId,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        res.data.eatLines.forEach((val)=>{
                            val.number = parseFloat(val.number)/1000
                        })
                        res.data.outLines.forEach((val)=>{
                            val.number = parseFloat(val.number)/1000
                        })
                        this.detailData = res.data

                    }
                })
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers(this.pageSize);
			},
			//获取用户列表
			getUsers(page) {
				this.listLoading = true;
				this.$axios.get('/blood-slots?index='+this.page+'&size='+page+'&gameid='+this.gameId,{},this.global().token).then((res)=>{
					if (res.status ==  200){
					    this.bloodList = res.data.data
						this.total = res.data.count
					}
                    this.listLoading = false
				})
			},
			//显示编辑界面
			handleEdit: function (index, row) {
                let roomId = row.id
                this.$axios.get('/blood-slot/'+roomId,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        res.data.eatLines.forEach((val)=>{
                            val.number = parseFloat(val.number)/1000
                        })
                        res.data.outLines.forEach((val)=>{
                            val.number = parseFloat(val.number)/1000
                        })
                        this.editForm = res.data
						this.editForm.gameid = roomId
						this.eatForm = this.editForm.eatLines
                        this.spitForm = this.editForm.outLines
                        this.editFormVisible = true;
                    }
                })
			},
			//显示新增界面
			handleAdd: function (row) {
				this.addFormVisible = true;
				this.addForm = {
                    gameid: row.id,
                    darkTax:'',
                    value:'',
                    tmpValue:'',
                    status:1,
                    eatLines:[],
                    outLines:[]
				};
                this.eatForm = [],
				this.spitForm = []
			},
			//编辑
			editSubmit: function (gameId) {
                if (this.editForm.darkTax<0 || this.editForm.darkTax>10000){
                    this.$message({message: '暗税税率格式不正确', type: 'error'});
                }else{
                    this.eatForm.forEach((val)=>{
                        val.number = parseFloat(val.number) * 1000
                    })
                    this.spitForm.forEach((val)=>{
                        val.number =  parseFloat(val.number) * 1000
                    })
                    this.addForm.eatLines = this.eatForm
                    this.addForm.outLines = this.spitForm
                    this.$axios.patch('/blood-slot/'+gameId,this.editForm,this.global().token).then((res)=>{
                        if (res.status == 200){
                            this.$message({message: '修改血池成功', type: 'success'});
                            this.editFormVisible = false;
                            this.getUsers(this.pageSize);
                        }else{
                            this.$message({message: res.data, type: 'error'});
                            this.eatForm.forEach((val)=>{
                                val.number = parseFloat(val.number) / 1000
                            })
                            this.spitForm.forEach((val)=>{
                                val.number =  parseFloat(val.number) / 1000
                            })
                        }
                    })
                }
			},
			//新增
			addSubmit: function () {
				if (this.addForm.darkTax<0 || this.addForm.darkTax>10000){
                    this.$message({message: '暗税税率格式不正确', type: 'error'});
				}else{
                    this.eatForm.forEach((val)=>{
                        val.number = parseFloat(val.number) * 1000
                    })
                    this.spitForm.forEach((val)=>{
                        val.number =  parseFloat(val.number) * 1000
                    })
                    this.addForm.eatLines = this.eatForm
                    this.addForm.outLines = this.spitForm
					this.$axios.post('/blood-slot',this.addForm,this.global().token).then((res)=>{
						if (res.status == 200){
                            this.$message({message: '添加血池成功', type: 'success'});
                            this.addFormVisible = false;
                            this.getUsers(this.pageSize);
						}else{
                            this.$message({message: res.data, type: 'error'});
                            this.eatForm.forEach((val)=>{
                                val.number = parseFloat(val.number) / 1000
                            })
                            this.spitForm.forEach((val)=>{
                                val.number =  parseFloat(val.number) / 1000
                            })
						}
					})
				}
			},
		},
		created() {
			this.getUsers(this.pageSize);
		}
	}

</script>

<style scoped>

</style>